<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>map</title>
    <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style type="text/css">
        html{height:70%}
        body{height:70%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/getscript?v=2.0&ak=webgl&ak=9A5fnCH1P6v4SBGaq54djXNxDdavrsuY"></script>

</head>
<body>
<div id="outter" style="width: 100%;height: 100%">
    <div id="container"></div>
    <a class='btn'  @click='nearbyyou'>获取附近人在地图上显示</a>
    <a class='btn'  @click='setmylocation'>拖动地图上的图标后,点击可以修改我的位置</a>
    <form  >
        <input type="hidden" v-model="example.userId"  name="userId">
        <label>距离:</label>
        <select  v-model="example.length_to"  name="LENGTH">
            <option value="2" selected="selected">2</option>
            <option value="1.5">1.5</option>
            <option value="1.8">1.8</option>
            <option value="1">1</option>
            <option value="3">3</option>
        </select>
    </form>
</div>

<script type="text/javascript">
//全局变量


    var zullstr=""
    var _this;
    var app=new Vue({
        el:"#outter",
        data:{
            mydata:"",
            //表单数据
            example:{
                length_to:"2",
                userId:""
            },//用于绑定搜索表单

            setx:"",
            sety:""

        },
        watch:{
            example:{
                //深度监听 监听对象中属性的变化以及集合中对象的变化
                handler:function(n,o){
                    this.nearbyyou();
                },
                deep:true
            }
        },

        created:function(){
            _this=this;
        },
        mounted:function(){

            this.getmylocation();

        },

        methods:{
            baiduMap:function(longitude,latitude,name) {
                _this.setx= longitude;
                _this.sety= latitude;
                console.log("加载地图")
                var map = new BMap.Map('container') // 创建地图实例
                var point = new BMap.Point(longitude, latitude) // 创建点坐标
                 map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
                var marker = new window.BMap.Marker(point) // 创建标注
                marker.enableDragging(); //标注可拖拽
                //添加监听事件
                marker.addEventListener("dragend", function (e) {
                    let x = e.point.lng; //经度
                    let y = e.point.lat; //纬度
                    _this.setx= x;
                    _this.sety= y;
                });
                map.addOverlay(marker) // 将标注添加到地图中
                //提示信息
                var opts = {
                    width : 50,     // 信息窗口宽度
                    // height: 100,     // 信息窗口高度
                }
                var infoWindow = new BMap.InfoWindow(name,opts);
                map.openInfoWindow(infoWindow,point); //开启
                marker.addEventListener("click", function(){
                    map.openInfoWindow(infoWindow,point); //开启信息窗口
                });
            },
            //查询自己的位置显示到地图上
            getmylocation:function(){
                $.ajax({
                    beforeSend: function (request) {
                        request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                    url:zullstr+"adress/selectadressbuyuserid",
                    type:"post",
                    data:{"userId":_this.userId},
                    success:function(data){
                        _this.mydata=data.data[0];
                        _this .baiduMap(data.data[0].longtitude,data.data[0].latitude,"您呀");
                    }
                });
            },
            //查询附近的人
            nearbyyou:function () {
                $.ajax({
                    beforeSend: function (request) {
                        request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                    url:zullstr+"adress/selectpersonaroundwithyou",
                    type:"post",
                    data:{"userId":_this.example.userId,"LENGTH":_this.example.length_to},
                    success:function(data){
                        var map = new BMap.Map('container') // 创建地图实例
                        map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
                        for (let i=0;i<data.length;i++){
                            let  result=data[i];
                            let point1 = new BMap.Point(result.point.x,result.point.y);
                            let marker = new BMap.Marker(point1);        // 创建标注
                            map.addOverlay(marker);
                            //提示信息
                            let opts = {
                                width : 50,     // 信息窗口宽度
                                // height: 100,     // 信息窗口高度
                            };
                            if (result.userId==_this.example.userId){
                                map.centerAndZoom(point1, 15);
                                let infoWindow = new BMap.InfoWindow("这是爸爸",opts);
                                map.openInfoWindow(infoWindow,point1); //开启
                                marker.addEventListener("click", function(){
                                    map.openInfoWindow(infoWindow,point1); //开启信息窗口
                                });

                            }else{
                                let strhref='coachinfo.html?'+'userId='+_this.example.userId+'&coachId='+result.userId
                                let content='<a href='+strhref + '>'+result.roletype +'</a>'+result.nickname
                                let infoWindow = new BMap.InfoWindow(content,opts);
                                marker.addEventListener("click", function(){
                                    map.openInfoWindow(infoWindow,point1); //开启信息窗口
                                });
                            }
                        }
                    }
                });
            },


            // 设置自己的位置
            setmylocation:function () {
                $.ajax({
                    url:"adress/updateadressbyusrid",
                    type:"post",
                    data:{"userId":_this.example.userId,"longtitude":_this.setx,"latitude":_this.sety},
                    success:function(data){
                        alert("he")
                    },
                    beforeSend: function (request) {
                        request.setRequestHeader("auth_token", $.cookie("auth_token"));}
                });

            }

        }


    });


</script>

</body>
</html>